<template>
  <div class="editor-form">
    <div class="editor-form-head">
      <div class="editor-form-title" v-if="title">{{ title }}</div>
      <div class="editor-form-tab" v-if="!hideTab">
        <template v-for="(item, index) in tabList" :key="index">
          <div
            v-if="!$utils.inArray(item.key, hide)"
            @click="selectedTab(item.key)"
            :class="tabActive == item.key ? 'active' : ''"
          >
            {{ item.title }}
          </div>
        </template>
      </div>
    </div>
    <div class="editor-form-content">
      <template v-if="!hideTab">
        <slot name="desc"></slot>
        <template v-if="tabActive == 'content'">
          <slot name="content"></slot>
        </template>
        <template v-if="tabActive == 'style'">
          <slot name="style"></slot>
        </template>
        <template v-if="tabActive == 'other'">
          <slot name="other"></slot>
        </template>
      </template>
      <template v-else>
        <slot></slot>
      </template>
    </div>
  </div>
</template>
<script lang="ts">
export default {
  name: "storeDiyForm",
};
</script>
<script  lang="ts" setup >
import { ref, getCurrentInstance, onMounted } from "vue";

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    title?: string;
    hideTab?: boolean;
    hide?: Array<string>;
  }>(),
  {
    title: "",
    hideTab: false,
    hide: () => {
      return [];
    },
  }
);

const tabList = ref<
  Array<{
    title: string;
    key: string;
  }>
>([
  {
    title: "内容",
    key: "content",
  },
  {
    title: "样式",
    key: "style",
  },
  {
    title: "其他",
    key: "other",
  },
]);

const tabActive = ref<string>("content");

const selectedTab = (slot: string) => {
  tabActive.value = slot;
};

onMounted(()=>{
  var tabNewList:any = [];
  tabList.value.forEach((item)=>{
    if(!$utils.inArray(item.key,props.hide)){
      tabNewList.push(item);
    }
  })
  if(props.hide.length > 0){
    tabActive.value = tabNewList[0].key || ''
  }
})
</script>
<style scoped>
.editor-form {
  background: #ffffff;
  width: 100%;
  height: 100%;
  z-index: 9;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  position: absolute;
}
.editor-form-content::-webkit-scrollbar {
  width: 0;
}
.editor-form-content {
  position: absolute;
  top: 41px;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px;
  width: calc(100% - 40px);
  height: calc(100% - 81px);
  overflow-x: hidden;
  overflow-y: auto;
  z-index: 0;
}
.editor-form-head {
  position: absolute;
  padding: 0 20px;
  left: 0;
  width: calc(100% - 40px);
  top: 0;
  background: #ffffff;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid var(--el-border-color);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 1;
}

.editor-form-title {
  font-weight: bold;
  font-size: 14px;
}
.editor-form-tab {
  background-color: #f5f5f5;
  border-radius: 24px;
  line-height: 24px;
  height: 24px;
  font-size: 12px;
  display: flex;
  align-items: center;
}
.editor-form-tab > div {
  padding: 0 15px;
  cursor: pointer;
  border-radius: 24px;
  transition: all 0.2s;
  user-select: none;
}
.editor-form-tab > div.active {
  background: var(--base-default);
  color: #ffffff;
}
</style>